<template>
  <div class="register">
    <!-- <van-field v-model="value" placeholder="请输入用户名" /> -->
    <van-row gutter="20" class="Padding">
      <van-col span="24" class="header">
        <van-image width="100" height="auto" class="logo" :src="require('../assets/img/logo.png')" />
      </van-col>
      <van-col span="24" class="list">
        <van-field v-model="phone" :placeholder="langDate.phone[2]" />
      </van-col>
      <van-col span="24" class="list">
        <van-field v-model="code" center clearable :placeholder="langDate.massage.value">
          <van-button slot="button" size="small"   @click="sendPhoneMassageBtn" round :loading='loading' loading-type="spinner">{{langDate.massage.btn}}</van-button>
        </van-field>
      </van-col>
      <van-col span="24" class="list">
        <van-field v-model="password" :placeholder="langDate.password[3]" />
      </van-col>
      <van-col span="24" class="list">
        <van-field v-model="investCode" :placeholder="langDate.invest.value"/>
      </van-col>
      <van-col span="24" class="footer">
        <van-button type="info" class="registerbtn" round plain size="large" @click="registerBtn">{{langDate.registerBtn}}</van-button>
        <van-button type="info" round plain size="large" @click="download">{{langDate.download}}</van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { register, sendPhoneMassage } from '@/api/api'
/* ... */
export default {
  name: 'register',

  mixins: [],

  props: {},

  data () {
    return {
      loading: false,
      lang: 'zh', // url语言类型
      phone: '',
      code: '',
      password: '',
      investCode: this.$route.query.invest,
      langDate: {}, // 根据语言状态赋值
      zh: {
        password: [
          '密码不可为空',
          '密码需字母和数字组成',
          '密码不可小于8个字符',
          '请输入密码'
        ],
        phone: [
          '号码不可为空',
          '号码不可小于5位数',
          '请输入号码'
        ],
        massage: {
          value: '请输入短信验证码',
          btn: '发送验证码',
          null: '验证码不可为空',
          success: '短信发送成功',
          failure: '短信发送异常，请稍后再试'
        },
        invest: {
          value: '请输入邀请码'
        },
        success: '注册成功，即将转跳下载页面',
        registerBtn: '注 册',
        download: '下 载'
      },
      us: {
        password: [
          'Password must not be empty',
          'Passwords need letters and Numbers',
          'Password must not be less than 8 characters',
          'Please enter your password'
        ],
        phone: [
          'The number must not be empty',
          'The number must not be less than five digits',
          'Please enter the number'
        ],
        massage: {
          value: 'Please enter the SMS verification code',
          btn: 'Send code',
          null: 'The verification code cannot be null',
          success: 'Message sent successfully',
          failure: 'Text message sending exception, please try again later'
        },
        invest: {
          value: 'Please enter the invitation code'
        },
        success: 'Successful registration, will be transferred to the download page',
        registerBtn: 'save',
        download: 'download'
      }
    }
  },

  computed: {},

  watch: {},

  created () {
    console.log(this.$route.query.invest)
    console.log(this.lang)
    if (this.$route.query.invest === undefined) {
      this.investCode = '000000'
    }
    if (this.lang === 'us') {
      this.langDate = this.us
    } else if (this.lang === 'zh') {
      this.langDate = this.zh
    } else {
      this.$toast.fail('语言参数调用错误，请检查：' + this.lang)
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    registerBtn () {
      var reg = /^[0-9A-Za-z] {8,16} $/
      if (this.phone === '') {
        this.$toast.fail(this.langDate.phone[0])
      } else if (this.phone.length < 5) {
        this.$toast.fail(this.langDate.phone[1])
      } else if (this.code === '') {
        this.$toast.fail(this.langDate.massage.null)
      } else if (this.password === '') {
        this.$toast.fail(this.langDate.password[0])
      } else if (this.password.length < 8) {
        this.$toast.fail(this.langDate.password[2])
      } else if (reg.test(this.password)) {
        this.$toast.fail(this.langDate.password[1])
      } else {
        let postData = {
          phone: this.phone,
          password: this.password,
          code: this.code,
          investCode: this.investCode,
          area: 86
        }
        // 获取数据库数据

        register(this.$qs.stringify(postData))
          .then(res => {
          // console.log(res.data)
            if (res.data.code === 0) {
              this.loading = false
              this.$toast.success(this.langDate.success)
              // var _this = this
              setTimeout(function () {
                console.log('执行了')
                // _this.$router.push('/download')
                window.location.href = 'https://jsms.global/download/index.html'
              }, 1000)
            } else if (res.data.code === -1001) {
              this.$toast.fail(this.langDate.password[1])
            }
          })
          .catch(err => {
            console.log(err.response)
            this.$toast.fail('服务器故障，为请求到数据')
          })
      }
    },
    sendPhoneMassageBtn () {
      if (this.phone === '') {
        this.$toast.fail(this.langDate.phone[0])
      } else if (this.phone.length < 5) {
        this.$toast.fail(this.langDate.phone[1])
      } else {
        this.loading = true
        let postData = {
          phone: this.phone,
          area: 86
        }
        // 获取数据库数据

        sendPhoneMassage(this.$qs.stringify(postData))
          .then(res => {
          // console.log(res.data)
            if (res.data.code === 0) {
              this.loading = false
              this.$toast.success(this.langDate.massage.success)
            } else {
              // alert(JSON.stringify(res.data))
            }
          })
          .catch(err => {
            console.log(err.response)
            this.$toast.fail('服务器故障，未请求到数据！')
          })
      }
    },
    download () {
      window.location.href = 'https://jsms.global/download/index.html'
    }
  }
}
</script>

<style lang="less">
/* ... */
.register {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/background.png");
  background-size: cover;
  .Padding {
    padding: 0 20px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    .header {
      padding: 80px 0 30px 0;
      text-align: center;
      .logo {}
    }
    .list{

      .van-cell{
        border-bottom: 1px solid #ffffff;
        background: transparent;
        input{
          color: #ffffff;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
          color: #AEB0FC;
        }
      }
    }
    .footer{
      margin-top: 80px;
      .registerbtn{
        margin-bottom: 15px;
      }
    }
  }
  input{
    background: transparent !important;
  }
}
</style>
